<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级总分</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mycss.css"/>
    <link rel="stylesheet" type="text/css" href="/css/page.css" />
</head>
<body>
<!--Vue.js-->
<script src="/js/vue.js"></script>
<!--Element-ui-->
<script src="/js/index.js"></script>
<!--axios-->
<script src="/js/axios.min.js"></script>
<!--cookie工具类-->
<script src="/js/cookie_utils.js"></script>
<!--工具-->
<script src="/js/utils.js"></script>


<div id="container">
    <el-container>
        <!--网站图片 + 用户信息-->
        <el-header height="100%">
            <el-col :span="6">
                <img class="logo" src="/img/server_html/sportLogo.jpg" style="width: 100px;height: 100px"/>
            </el-col>
            <el-col :span="9">
                <span class="campus-sports" style="margin-left: 150px;font-size: 36px;padding-top: 50px">重庆工程学院校园运动会</span>
            </el-col>
            <el-col :span="6" :offset="12" style="display: flex; align-items: center; justify-content: flex-end;">
                <br>
                <!--个人用户信息-->
                <el-dropdown >
                    <span class="no-attention move-bottom-mini-mini" style="font-size: 20px">
                                用户:&nbsp;
                        <el-button type="text"  icon="el-icon-arrow-down" style="font-size: 20px;margin-right: 20px">{{user.username}}</el-button>
                    </span>

                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <el-button @click="myPage" style="width: 100px;text-align: center;border: none;font-size: 15px">个人信息</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button @click="logout" style="width: 100px;text-align: center;border: none;font-size: 15px">注销</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--头像-->
                <el-col :span="6" :offset="0">
                    <el-avatar :src="user.userHeadUrl"></el-avatar>
                </el-col>
            </el-col>
        </el-header>

        <el-main>
            <br>
            <template>
                <el-card class="box-card">
                    <div>
                        <el-input
                            v-model="input"
                            placeholder="请输入班级名称"
                            style="width: 250px"
                            clearable
                            @keyup.enter.native="handleQuery">
                            <i
                                slot="prefix"
                                class="el-input__icon el-icon-search"
                                style="cursor: pointer"
                                @click="handleQuery"
                            ></i>
                        </el-input>
                        <br>
                    </div>
                <el-table
                    :data="scoresList"
                    stripe
                    style="width: 100%">
                    <el-table-column type="index" label="排名" width="180"></el-table-column>
                    <el-table-column prop="name" label="班级名称" width="180"></el-table-column>
                    <el-table-column prop="snum" label="班级人数"></el-table-column>
                    <el-table-column prop="collegeName" label="所属学院"></el-table-column>
                    <el-table-column prop="updateTime" label="最新时间"></el-table-column>
                    <el-table-column prop="score" label="总分"></el-table-column>
                </el-table>
                    <!--分页工具条-->
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[10,20,30,40]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="counts"
                        style="margin-left: 260px">
                    </el-pagination>
                </el-card>
            </template>
        </el-main>

        <el-footer class="foot">
            <br>
            <br>
            &copy;2023 by 第三组
        </el-footer>
    </el-container>


</div>

<script>
    //登录验证
    if (getCookieValue("token") == null || getCookieValue("token") === '') {
        window.location.href = baseUrl + 'system/toLogin?reason=nologin';
    }
</script>

<script>
    var baseUrl = "http://localhost:8080/client/";
    var vm = new Vue({
        el: '#container',
        data: {
            scoresList: [],
            input: '',
            counts: 100,
            page: 1,
            pageSize: 10,

            user: {
                userId: '',
                username: '',
                userHeadUrl: '',
                token: ''
            },
            searchInput: '',
            projects: [],
            searchType: '',

            resultProjects: [],

            drawer: false,
            isok: true, //查询成功与否
            inputType: '', //按类别查找时，下拉框中每项的参数
            isSelect: false, //是否显示类别查询下拉框
            typeValue: '' //axios中传递的类别值 0个人，1团体
        },

        created: function () {
            this.user.token = getCookieValue("token");
            axios({
                method: 'get',
                url: baseUrl + 'user/getLoginUserInfo' + '/' + this.user.token,
            }).then((res)=>{
                this.user.userId = res.data.data.userId;
                this.user.username = res.data.data.username;
                this.user.gender = res.data.data.gender;
                this.user.userHeadUrl = '/img/user_upload/' + res.data.data.img;
            });
        },

        mounted() {
            this.queryScores();
        },

        methods: {
            searchProject() {
                console.log(this.isok);
            },
            //分页查询
            handleSizeChange(val) {
                this.pageSize = val;
                this.queryScores();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.queryScores();
            },
            //展示班级总分
            queryScores() {
                axios({
                    method: 'get',
                    url: baseUrl + "user/classScores",
                    params: {
                        page: this.page,
                        pageSize: this.pageSize
                    }
                }).then(response => {
                    if (response.data.code == 200) {
                        this.counts = response.data.data.total;
                        this.scoresList = response.data.data.records;
                    } else {
                        this.$message.warning("查询失败!");
                    }
                })
                .catch(error => {
                    this.$message.error('系统繁忙，请稍后再试！');
                });
            },

            //查询班级总分
            handleQuery(){
                axios({
                    method: 'post',
                    url: baseUrl + "user/classSelect",
                    params: {
                        page: this.page,
                        pageSize: this.pageSize,
                        name: this.input ? this.input : undefined
                    }
                }).then(response => {
                    if (response.data.code == 200) {
                        this.counts = response.data.data.total;
                        this.scoresList = response.data.data.records;
                    } else {
                        this.$message.warning("查询失败!");
                    }
                })
                    .catch(error => {
                        this.$message.error('系统繁忙，请稍后再试！');
                    });
            },

            myPage() {
                window.location.href = baseUrl + "system/toMyInfo";
            },

            myIndex() {
                window.location.href = baseUrl + "system/toIndex";
            },

            logout() {
                axios({
                    method: 'post',
                    url: baseUrl + 'system/logout',
                    data: {
                        token: this.user.token,
                    },
                }).then((res)=>{
                    setCookieValue("token", "");
                    window.location.href = baseUrl + 'system/toLogin'
                });
            }
        }
    });
</script>
</body>
</html>
